<template>
<div class="app-container" >
    
      <el-card class="box-card clearfix" >
         <!-- <div class="block">
            <span class="demonstration">设定工作日</span>
            {{value6}}
            <el-date-picker
              v-model="value6"
              type="daterange"
              range-separator="至"
              value-format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div> -->
          <Date-picker
              @on-change="handleChange"
              :options="DatePicker"
              multiple
              type="date"
              @disabledDate="disabledDate"
              format="yyyy-MM-dd"
              placeholder="请选择时间段"
              
              class="datePick"
              placement="top-start">
          </Date-picker>
          <el-button type="primary" class="saveDate" @click="pushDate">{{value}}</el-button>
          <el-button type="primary" class="saveDate1" @click="pushDate1">{{value1}}</el-button>
          <Date-picker
              @on-change="handleChange1"
              :options="DatePicker"
              multiple
              type="date"
              @disabledDate="disabledDate"
              format="yyyy-MM-dd"
              placeholder="请选择时间段"
              
              class="datePick1"
              placement="top-start">
          </Date-picker>
          
        <ele-calendar
              :render-content="renderContent"
              :data="datedef"
              :prop="prop"
              border="true"
              disabledDate="true"
              class="calendar"
        ></ele-calendar>
      <div slot="header" class="clearfix">
        <span class="cal-title">工作日历</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
    </el-card>
</div>
</template>
<script>
import Calendar from "vue-calendar-component";
import eleCalendar from "ele-calendar";
import qs from "qs";
export default {
  data() {
    return {
      DatePicker: {
        disabledDate(date) {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      },
      value6: "",
      value: "添加工作日",
      value1: "添加非工作日",
      saveDate1: "",
      saveDate: "",
      arr: [2, 3, 6],
      datedef: [],
      dateArr: [],
      prop: "date"
    };
  },
  components: {
    Calendar,
    eleCalendar
  },
  created() {
    this.$axios
      .post("http://localhost:8088/getWorkDate", qs.stringify({}), {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
      .then(res => {
        console.log(res.data.data);
        let a = res.data.data;
        for (let i in a) {
          let obj = {};
          if (a[i].isWorkday) {
            obj.date = a[i].date;
            console.log(a[i].date);
            obj.content = "工作日";
          } else {
            obj.date = a[i].date;
            console.log(a[i].date);
            obj.content = "非工作日";
          }
          this.datedef.push(obj);
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  computed: {
    nowTime() {
      return new Date();
    }
  },
  methods: {
    handleChange(daterange) {
      this.saveDate = daterange.split(",");
      console.log(this.saveDate);
    },
    handleChange1(daterange) {
      this.saveDate1 = daterange.split(",");
      console.log(this.saveDate1);
    },
    pushDate() {
      console.log(this.saveDate[0]);
      for (let i in this.saveDate) {
        // console.log(this.saveDate[i])
        let obj = {};
        obj.date = this.saveDate[i];
        obj.content = "工作日";
        this.datedef.push(obj);
      }
      let str = this.saveDate.join(",");
      console.log(str);
      //数据反馈给后台
      this.$axios
        .post(
          "http://localhost:8088/setWorkDate",
          qs.stringify({
            // workDate: JSON.stringify(this.saveDate)
            workDate: str
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res);
          this.$axios
            .post(
              "http://localhost:8088/isSetDay",
              qs.stringify({
                roleId: window.localStorage.getItem("roleId")
              }),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(res => {
              console.log(res.data.data);
              window.localStorage.setItem("setDay", res.data.data);
            });
        });
    },
    pushDate1() {
      console.log(this.saveDate1[0]);
      for (let i in this.saveDate1) {
        // console.log(this.saveDate[i])
        let obj = {};
        obj.date = this.saveDate1[i];
        obj.content = "非工作日";
        this.datedef.push(obj);
      }
      let str = this.saveDate1.join(",");
      console.log("str:" + str);
      this.$axios
        .post(
          "http://localhost:8088/setOffDate",
          qs.stringify({
            // workDate: JSON.stringify(this.saveDate)
            offDate: str
          }),
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(res => {
          console.log(res);
          this.$axios
            .post(
              "http://localhost:8088/setWorkDate",
              qs.stringify({
                // workDate: JSON.stringify(this.saveDate)
                workDate: str
              }),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(res => {
              console.log(res);
              this.$axios
                .post(
                  "http://localhost:8088/isSetDay",
                  qs.stringify({
                    roleId: window.localStorage.getItem("roleId")
                  }),
                  {
                    headers: {
                      "Content-Type": "application/x-www-form-urlencoded"
                    }
                  }
                )
                .then(res => {
                  console.log(res.data.data);
                  window.localStorage.setItem("setDay", res.data.data);
                });
            });
        });
    },
    renderContent(h, parmas) {
      const loop = data => {
        console.log(data.defvalue.value.content);
        if (data.defvalue.value.content) {
          return data.defvalue.value.content == "工作日" ? (
            <div>
              <div>{data.defvalue}</div>
              <span class="work">工作日</span>
            </div>
          ) : (
            <div>
              <div>{data.defvalue.text}</div>
              <span class="offwork">非工作日</span>
            </div>
          );
        } else {
          return <div>{data.defvalue.text}</div>;
        }
      };
      return <div style="min-height:60px;">{loop(parmas)}</div>;
    }
  }
};
</script>
<style lang="scss" >
.show-workday {
  font-size: 22px;
  margin: 10px 0;
  width: 100%;
  height: 600px;
  text-align: center;
  border: 1px solid gray;
}
.ivu-picker-panel-body {
  position: relative;
  z-index: 11;
}
.app-container {
  .box-card {
    overflow: visible;
  }
}
.work,
.offwork {
  background: #409eff;
  color: white;
  font-size: 18px;
  border-radius: 3px;
}
.offwork {
  background: #69c33d;
}
.cal-title {
  font-size: 22px;
}
.calendar {
  float: left;
  margin: 20px 0 0 20px;
}
.block {
  float: left;
  font-size: 16px;
}
.saveDate,
.datePick {
  float: left;
}
.datePick1,
.saveDate1 {
  float: right;
}
.block,
.saveDate,
.saveDate1,
.datePick,
.datePick1 {
  margin: 10px 20px;
}

.datePick,
.datePick1 {
  width: 220px;
  line-height: 40px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>

